<template>
  <div>
    <div class="poll">
      <!-- 资源池 -->
      <div v-if="small == 0" @mousedown="boxdown" @mouseup="boxup" @mouseleave="boxleave" class="bodyBox">
        <span
          v-for="(item, index) in subData"
          class="itemBox"
          :key="index"
          :class="item.check ? 'subCheck' : ''"
          @mouseenter="subenter(item)"
          @mousedown="subdown(item)"
        >
          <a-tooltip placement="top">
            <template slot="title" v-if="item.check">{{ item.id }}</template>
            <p style="user-select: none">
              {{ item.id }}
            </p>
          </a-tooltip>
        </span>
      </div>
      <div v-if="small == 1" @mouseleave="boxleave" class="smallBox">
        <span v-for="(item, index) in subData" class="itemBox" :key="index" :class="item.check ? 'subCheck' : ''">
          <a-tooltip placement="top">
            <template slot="title" v-if="item.check">{{ item.id }}</template>
            <p>
              <!-- {{ index + 1 }} -->
            </p>
          </a-tooltip>
        </span>
      </div>
      <div v-if="small == 2" @mousedown="boxdown" @mouseup="boxup" @mouseleave="boxleave" class="body">
        <span
          v-for="(item, index) in subData"
          class="itemBox"
          :key="index"
          :class="item.check ? 'subCheck' : ''"
          @mouseenter="subenter(item)"
          @mousedown="subdown(item)"
        >
          <a-tooltip placement="top">
            <template slot="title" v-if="item.check">{{ item.id }}</template>
            <p style="user-select: none">
              {{ item.id }}
            </p>
          </a-tooltip>
        </span>
      </div>
    </div>
    <a-button @click="save" type="primary">保存配置</a-button>
  </div>
</template>

<script>
export default {
  //total:循环添加总数，data:数据，small:1仅查看小框，0可选修改是否占用,2小格子可选
  props: ['total', 'data', 'small'],
  computed: {
    choseItems() {
      //计算属性，用来记录哪些被选中了，根据自己的需求编写
      var items = []
      for (var i = 0; i < this.subData.length; i++) {
        if (this.subData[i].check) {
          items.push(1)
        } else {
          items.push(0)
        }
      }
      return items
    },
  },
  created() {
    if (this.total) {
      //total随机产生数据
      for (let i = 1; i <= this.total; i++) {
        this.subData.push({ id: i, check: Math.random() < 0.1 })
      }
    } else {
      //子组件传回数据
      this.subData = [...JSON.parse(this.data)]
    }

    // console.log(this.subData, this.small)
  },
  data() {
    return {
      lastItemId: 0, //上次选中的节点Id
      isDrop: false, //是否正在拖拽
      subData: [
        // { id: 1, time: '00:00-00:30', check: false },
        // { id: 2, time: '00:30-01:00', check: false },
        // { id: 3, time: '01:00-01:30', check: false },
        // { id: 4, time: '01:30-02:00', check: false },
        // { id: 5, time: '02:00-02:30', check: false },
        // { id: 6, time: '02:30-03:00', check: false },
        // { id: 7, time: '03:00-03:30', check: false },
        // { id: 8, time: '03:30-04:00', check: false },
        // { id: 9, time: '04:00-04:30', check: false },
        // { id: 10, time: '04:30-05:00', check: false },
        // { id: 11, time: '05:00-05:30', check: false },
        // { id: 12, time: '05:30-06:00', check: false },
        // { id: 13, time: '06:00-06:30', check: false },
        // { id: 14, time: '06:30-07:00', check: false },
        // { id: 15, time: '07:00-07:30', check: false },
        // { id: 16, time: '07:30-08:00', check: false },
        // { id: 17, time: '08:00-08:30', check: false },
        // { id: 18, time: '08:30-09:00', check: false },
        // { id: 19, time: '09:00-09:30', check: false },
        // { id: 20, time: '09:30-10:00', check: false },
        // { id: 21, time: '10:00-10:30', check: false },
        // { id: 22, time: '10:30-11:00', check: false },
        // { id: 23, time: '11:00-11:30', check: false },
        // { id: 24, time: '11:30-12:00', check: false },
        // { id: 25, time: '12:00-12:30', check: false },
        // { id: 26, time: '12:30-13:00', check: false },
        // { id: 27, time: '13:00-13:30', check: false },
        // { id: 28, time: '13:30-14:00', check: false },
        // { id: 29, time: '14:00-14:30', check: false },
        // { id: 30, time: '14:30-15:00', check: false },
        // { id: 31, time: '15:00-15:30', check: false },
        // { id: 32, time: '15:30-16:00', check: false },
        // { id: 33, time: '16:00-16:30', check: false },
        // { id: 34, time: '16:30-17:00', check: false },
        // { id: 35, time: '17:00-17:30', check: false },
        // { id: 36, time: '17:30-18:00', check: false },
        // { id: 37, time: '18:00-18:30', check: false },
        // { id: 38, time: '18:30-19:00', check: false },
        // { id: 39, time: '19:00-19:30', check: false },
        // { id: 40, time: '19:30-20:00', check: false },
        // { id: 41, time: '20:00-20:30', check: false },
        // { id: 42, time: '20:30-21:00', check: false },
        // { id: 43, time: '21:00-21:30', check: false },
        // { id: 44, time: '21:30-22:00', check: false },
        // { id: 45, time: '22:00-22:30', check: false },
        // { id: 46, time: '22:30-23:00', check: false },
        // { id: 47, time: '23:00-23:30', check: false },
        // { id: 48, time: '23:30-00:00', check: false },
      ],
    }
  },
  methods: {
    save() {
      console.log(this.subData)
    },
    subenter: function (item) {
      //拖选中子元素
      if (this.isDrop) {
        if (this.lastItemId != item.id) {
          var min = this.lastItemId < item.id ? this.lastItemId : item.id
          var max = this.lastItemId < item.id ? item.id : this.lastItemId
          if (this.lastItemId - item.id < 0) {
            //正方向
            for (var i = min; i < Math.abs(this.lastItemId - item.id) + min; i++) {
              this.subData[i].check = !this.subData[i].check
            }
          } else {
            //反方向
            for (var i = max - 2; i > min - 2; i--) {
              this.subData[i].check = !this.subData[i].check
            }
          }

          this.lastItemId = item.id
        }
      }
    },
    subdown: function (item) {
      //单个选中子元素
      this.lastItemId = item.id
      item.check = !item.check
    },
    boxdown: function () {
      //鼠标按下开始拖选
      this.isDrop = true
    },
    boxup: function () {
      //鼠标抬起取消拖选
      this.isDrop = false
    },
    boxleave: function () {
      //当鼠标移出区域块时，视为取消拖选
      this.isDrop = false
    },
    handleMouseLeave: function () {
      //处理tooltip 移出时的延迟问题
      const tooltip = this.$refs.tooltip
      for (var i = 0; i < tooltip.length; i++) {
        tooltip[i].handleClosePopper()
      }
    },
  },
}
</script>
<style>
.poll p {
  margin-bottom: 0px !important;
}
</style>
<style lang="less" scoped>
.poll {
  margin-top: 20px;
  // display: flex;
  // flex-wrap: wrap;
  .bodyBox {
    display: flex;
    flex-wrap: wrap;
    .itemBox {
      display: inline-block;
      width: 50px;
      height: 50px;
      line-height: 50px !important;
      text-align: center;
      border: 1px solid rgb(87, 84, 84);
      margin: -1px 0 0 -1px;
      // margin-bottom: -4px;
      p {
        width: 50px;
        height: 50px;
      }
    }
  }
  .body {
    display: flex;
    flex-wrap: wrap;
    .itemBox {
      display: inline-block;
      width: 35px;
      height: 35px;
      line-height: 35px !important;
      text-align: center;
      border: 1px solid rgb(87, 84, 84);
      margin: -1px 0 0 -1px;
      // margin-bottom: -4px;
      p {
        width: 35px;
        height: 35px;
        font-size: 14px;
      }
    }
  }
  .smallBox {
    display: flex;
    flex-wrap: wrap;
    .itemBox {
      display: inline-block;
      width: 25px;
      height: 25px;
      // line-height: 25px;
      line-height: 25px !important;
      text-align: center;
      border: 1px solid rgb(87, 84, 84);
      margin: -1px 0 0 -1px;
      // margin-bottom: -5px;
      p {
        width: 25px;
        height: 25px;
      }
    }
  }
}
.subCheck {
  background-color: rgb(140, 236, 75);
}
</style>
